
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>Apple</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="shortcut icon" href="img/favicon.ico" /> 
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link href="css/non-responsive.css" rel="stylesheet">
		<link rel="stylesheet" href="css/style.css" />
	</head>

<body>
    <nav class="navbar navbar-inverse" style="height: 45px;"> 
     	
      <div class="container">

        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav" id="navbar-fontsize">
          	<li><a href="#"><span class="glyphicon glyphicon-apple"></span></a></li>
            <li><a href="#">Mac</a></li>
            <li><a href="#">iPad</a></li>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Watch</a></li>
            <li><a href="#">TV</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
          </ul>
        </div>
        
      </div>  <!--end container-->
    </nav>   <!--end navbar-->
    
 
	<div class="row">
		<div class="col-lg-12">
			<div  id="carousel_container" class="carousel slide">  <!--data-ride="carousel"-->
			<!--图片容器-->
				<div class="carousel-inner">
					<div class="item">
						<a href="#"><img src="img/2.jpg"  alt="" /></a>
						<div class="carousel-caption-picture1">
							<a href="http://www.baidu.com" class="picture1-a">
								<h1 class="picture1-h1">iPhone</h1>
								<h1 class="picture1-h2">This is 7.</h1>	  
							</a>								    
						</div>							
					</div>
					<div class="item">
						<a href="#"><img src="img/3.jpg"  alt="" /></a>
						<div class="carousel-caption-picture2">
							<a href="#" class="picture2-a">
								<h1 class="picture2-h1">iPad Pro</h1>
								<h1 class="picture2-h2">Anything you can do,<br/>you can do better.</h1>	  	  
							</a>								    
						</div>
					</div>
					<div class="item active">
						<a href="#"><img src="img/4.jpg" alt="" /></a>
						<div class="carousel-caption-picture3">
							<a href="http://www.baidu.com" class="picture3-a">
								<img src="img/watch.png" alt="" />
								<h1 class="picture3-h1">Live a better day</h1> 
							</a>								    
						</div>	
					</div>

				</div>

				<!--小圆圈容器-->
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel_container" class="active"></li>
					<li data-slide-to="1" data-target="#carousel_container"></li>
					<li data-slide-to="2" data-target="#carousel_container"></li>
				</ol>
				<!--左右按钮容器-->
					
				<a href="#carousel_container" data-slide="prev" class="left carousel-control">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a href="#carousel_container" data-slide="next" class="right carousel-control">
					<span class="glyphicon glyphicon-chevron-right"></span>	
				</a>
						
			</div>   <!--end carousel slide-->
					
		</div>			  <!--end col-md-12	-->
		

		<div class="col-lg-12">
			<ul class="bottom_picture_ul">
				<li class="bottom_picture_ul_li">
					<div class="bottom_picture_ul_li_img11">
						<h4 class="bottom_picture_ul_li_img11_h41">The Rock &amp; Siri</h4>
						<h4 class="bottom_picture_ul_li_img11_h42">Watch the film.</h4>
					</div>
					
				</li>
				<li class="bottom_picture_ul_li">
					<div class="bottom_picture_ul_li_img22">
						<h4 class="bottom_picture_ul_li_img22_h41">Buy a Mac or iPad Pro for college.</h4>
						<h4 class="bottom_picture_ul_li_img22_h42">Get Beats.</h4>
					</div>
				</li>
				<li class="bottom_picture_ul_li">
					<div class="bottom_picture_ul_li_img33">
						<h4 class="bottom_picture_ul_li_img33_h41">Summer Casual</h4>
						<h4 class="bottom_picture_ul_li_img33_h42">Shop Accessories.</h4>
					</div>
				</li>
				<li class="bottom_picture_ul_li">
					<a href="#">
						<div class="bottom_picture_ul_li_img44">
							<h4 class="bottom_picture_ul_li_img44_h41">Why Switch</h4>
							<h4 class="bottom_picture_ul_li_img44_h42">Life is easier on iPhone.</h4>
						</div>
					</a>
				</li>
			</ul>
		</div>
			
	</div>  <!--end row-->
    
   
   <div class="auto_background">
    	<div class="container">
    		<div class="bottom_text">
				<ul class="bottom_text_ul">
					<li class="bottom_text_ul_li">
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">Shop and Learn</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Mac</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">iPad</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">iPhone</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Watch</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">TV</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Music</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">iTunes</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">HomePad</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">iPod touch</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Accessories</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Gift Cards</a></li>
						</ul>
					</li>
					<li class="bottom_text_ul_li">
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">Apple Store</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Find a Store</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Genius Bar</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Today at Apple</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Apple Camp</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Field Trip</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Apple Store App</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Refurbished and Clearance</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Financing</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Reuse and Recycling</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Order Status</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Shopping Help</a></li>
						</ul>
					</li>
					<li class="bottom_text_ul_li">
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">For Education</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Apple and Education</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Shop for College</a></li>
						</ul>
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">For Business</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Find a Store</a></li>
						</ul>
					</li>
					<li class="bottom_text_ul_li">
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">Account</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Manage Your Apple ID</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Apple Store Account</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">iCloud.com</a></li>
						</ul>
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">Apple Values</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Accessibility</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Education</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Environment</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Inclusion and Diversity</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Privacy</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Supplier Responsibility</a></li>
						</ul>
					</li>
					<li class="bottom_text_ul_li">
						<ul class="bottom_text_ul_li_ul">
							<li class="bottom_text_ul_li_ul_li">About Apple</li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Newsroom</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Apple Leadership</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Job Opportunities</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Investors</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Events</a></li>
							<li><a href="#" class="bottom_text_ul_li_ul_li_a">Contact Apple</a></li>
						</ul>
					</li>
				</ul>
    		</div> <!--end bottom_text-->
    		
    		<div class="bottom_state">
    			<span class="bottom_state_span1">
    				More ways to shop: Visit an 
    				<a href="#">Apple Store</a>
    				, call 1-800-MY-APPLE, or 
    				<a href="#">find a reseller</a>.
    			</span>
    			<div class="bottom_state_hr"><hr/></div>
    			<div class="bottom_state_copyright">Copyright © 2017 Apple Inc. All rights reserved.</div>
    			<div class='bottom_state_span2'>
    				<a class="bottom_state_span2_a" href="">Privacy Policy</a>
    				<a class="bottom_state_span2_a" href="">Term of Use</a>
    				<a class="bottom_state_span2_a" href="">Sales and Refunds</a>
    				<a class="bottom_state_span2_a" href="">Legal</a>
    				<a class="bottom_state_span2_a" href="">Site Map</a>
    			</div>
    			<div class="bottom_state_logo">
    				<img src="img/16.png" alt="" />
    				<a class="bottom_state_logo_a" href="#">United Status</a>
    			</div>
    			
    			
    		</div>
    	</div> <!-- end container-->		
   </div>   <!--end auto_background-->
    	


  


</body>
</html>
